<template>
    <el-container>
        <el-container style="min-height: 580px">
            <el-header style="padding: 0;">
                <el-form
                    inline
                    label-width="49px"
                    :model="materialQueryList"
                    style="width: 100%;display: flex;justify-content: space-between;"
                >
                <el-row>
                <el-col :span="24" style="padding-left: 10px;">
                    <el-input
                        v-model="materialQueryList.materialCode" 
                        placeholder="请输入物料编码"
                        style="width: 125px"
                        @keyup.enter="$refs.tableselect.getData()"
                    ></el-input>&nbsp;
                    <el-input
                        v-model="materialQueryList.materialName"
                        placeholder="请输入物料名称"
                        style="width: 125px"
                        @keyup.enter="$refs.tableselect.getData()"
                    ></el-input>&nbsp;
                    <el-input
                        v-model="materialQueryList.consumeCode"
                        placeholder="请输入销售单号"
                        style="width: 125px"
                        @keyup.enter="$refs.tableselect.getData()"
                    ></el-input>&nbsp;
                    <el-date-picker
                        style="width: 240px "
                        v-model="materialQueryList.consumeTimes"
                        type="datetimerange"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        format="YYYY-MM-DD HH:mm:ss"
                        range-separator="-"
                        unlink-panels="true"
                        start-placeholder="销售开始时间"
                        end-placeholder="销售结束时间"
                        :default-time="defaultTime"
                        @keyup.enter="$refs.tableselect.getData()"
                    />&nbsp;
                    <el-select
                        placeholder="---请选择状态---"
                        v-model="materialQueryList.consumeState"
                        style="width: 130px"
                        @keyup.enter="$refs.tableselect.getData()"
                    >
                        <el-option label="---请选择---" value />
                        <el-option label="已点单" value="0" />
                        <el-option label="已买单" value="1" />
                    </el-select>
                    <el-button style="margin-left: 10px;" type="primary" @click="opBindData">查询</el-button>
                </el-col></el-row>
                </el-form>
            </el-header>
            <el-main>
                <scTable
                    ref="mytable"
                    :row-class-name="setRowClass"
                    :queryType="queryType"
                    :data="listData"
                    :queryList="materialQueryList"
                    :column="columnList"
                    :orderList="OrderList"
                    @row-click="clickRow"
                    :sort-orders="['ascending', 'descending']"
                    @selection-change="selectionChange"
 
                    show-summary
                    remoteSummary
                    style="height: 450px; min-width: 420"
                >
                    <el-table-column type="selection" min-width="50"></el-table-column>
                </scTable>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import publicjs from "@/api/model/publicjs";
export default {
    name: "typelist",
    components: {
        publicjs,
    },
    props: {
        queryType: { type: String, default: "pos-sale/org-sale-pages" },
        queryList: { type: Object, default: {} },
        // isPurchaseUnity: { type: Boolean, default: false },
    },
    data() {
        return {
            materialTypeFlag: true,
            selectionRows: [],
            selection: [],
    
            attrList: {},
            valueList: {},
            columnList: [
                {
                    prop: "materialCode",
                    label: "物料编号",
                    width: "240",
                    sortable: false,
                },
                {
                    prop: "materialName",
                    label: "物料名称",
                    width: "240",
                    sortable: false,
                },
                {
                    prop: "materialSpecs",
                    label: "物料规格",
                    width: "160",
                    sortable: false,
                },
                {
                    prop: "consumeTime",
                    label: "销售时间",
                    width: "170",
                    sortable: false,
                },
                {
                    prop: "consuemCode",
                    label: "销售单号",
                    width: "160",
                    sortable: false,
                },
                {
                    prop: "materialTypeName",
                    label: "物料分类",
                    width: "140",
                    sortable: false,
                },
                {
                    prop: "unitName",
                    label: "物料单位",
                    width: "110",
                    sortable: false,
                },
                {
                    prop: "goodsCode",
                    label: "点单商品编号",
                    width: "160",
                    sortable: false,
                },
                {
                    prop: "goodsName",
                    label: "点单商品名称",
                    width: "160",
                    sortable: false,
                },
                {
                    prop: "orderQty",
                    label: "数量",
                    width: "100",
                    sortable: false,
                },
                {
                    prop: "salePrice",
                    label: "单价",
                    width: "110",
                    sortable: false,
                },
                {
                    prop: "totalAmt",
                    label: "金额",
                    width: "120",
                    sortable: false,
                },
                {
                    prop: "roomName",
                    label: "桌台",
                    width: "110",
                    sortable: false,
                },
                {
                    prop: "processState",
                    label: "状态",
                    width: "120",
                    sortable: false,
                },
            ],
            materialQueryList: {},
            result: "", // 运行结果
            props1: {
                checkStrictly: true,
                emitPath: false,
            },
            group: [],
            optionsUomCode: [],
            optionsPurchaseUnity: [],
            materialTypeTree: [],
            lastClickTime: 0,
            doubleClickTimeout: null,
            defaultTime:[
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
			]
        };
    },
    computed: {},
    // watch: {
    //     queryList: {
    //         handler(newVal, oldVal) {
    //             // 如果 defaultQueryList 更新了，也更新 queryList
    //             this.materialQueryList = { ...this.queryList, ...newVal };
    //             this.$refs.mytable.getData();
    //         },
    //     },
    // },
    created() {
        // 将 queryList 的值赋给 queryList
        this.materialQueryList = { ...this.queryList };
    },
    methods: {
        // searchChange() {
        //     this.materialQueryList = {
        //         ...this.materialQueryList,
        //         ...this.queryList,
        //     };
        //     this.$nextTick(() => {
        //         this.$refs.mytable.getData();
        //     });
        // },
        //表格选择后回调事件
        selectionChange(selection) {
            // this.$nextTick(() => {
            //     const newSelection = new Set([...this.selectionRows, ...selection]);
            //     this.selectionRows = Array.from(newSelection); // 转换回数组形式
            // });
            this.selectionRows = selection;
            console.log(selection, "selection");
        },
        // setRowClass({ row }) {
        //     if (this.selectionRows.includes(row)) {
        //         return "selected-row-color";
        //     }
        //     return "";
        // },

        // clickRow(row) {
        //     clearTimeout(this.doubleClickTimeout);
        //     // 记录当前点击时间
        //     const currentTime = new Date().getTime();

        //     // 判断是否为双击
        //     if (currentTime - this.lastClickTime < 250) {
        //         // 双击
        //         // this.toggleSelection(row);
        //         this.$refs.mytable.toggleRowSelection(row, true);
        //         // 触发事件，传递选中的行
        //         this.$emit("selection-changed", this.selectionRows);
        //     } else {
        //         // 单击
        //         this.lastClickTime = currentTime;
        //     }

        //     // 设置超时，以便下次点击被认为是单击
        //     this.doubleClickTimeout = setTimeout(() => {
        //         this.lastClickTime = 0;
        //     }, 500);
        // },
        initMaterialType(ids, showFlag) {
            this.materialQueryList.materialTypeIds = [ids];
            this.materialTypeFlag = showFlag;
        },
        async opBindData() {
            // this.selectionRows = [];
            // this.materialQueryList = {
            //     ...this.materialQueryList,
            //     ...this.queryList,
            // };
            this.$nextTick(() => {
                this.$refs.mytable.getData();
            });
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/options",
                    { Codes: ["Status"] }
                );
                if (returnValue.status == 200) {
                    this.optionsState = returnValue.response.find(
                        (p) => p.code == "Status"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }

            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "material-type/tree",
                    { status: 1 }
                );
                if (returnValue.status == 200) {
                    this.materialTypeTree = returnValue.response;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
            // if(this.isPurchaseUnity){
            //     try {
            //         var returnValue = await this.$API.auth.GetProcessApi.get(
            //             "store/current-purchaseUnity",{ }
            //         );
            //         if (returnValue.status == 200) {
            //             this.optionsPurchaseUnity = returnValue.response;
            //         } else {
            //             this.$message.error("操作失败:" + returnValue.msg);
            //         }
            //     } catch (error) {
            //         this.loading = false;
            //         return false;
            //     }
            // }
        },
    },
    async mounted() {
        //await this.initOptions();
        await this.opBindData();
    },
};
</script>
<style lang="scss" scoped>
/* 当表格行处于悬停状态时改变背景颜色 */
::v-deep .el-table .el-table__row:hover {
    background-color: #dae8f7;
}
::v-deep .el-table__body .el-table__row--striped.hover-row td {
    background-color: #dae8f7 !important;
}
//   斑马纹选中颜色
::v-deep .el-table__body .el-table__row--striped.selected-row-color td {
    background-color: #b8dcff !important;
}
::v-deep .el-table {
    --el-table-row-hover-bg-color: #dae8f7;
}

::v-deep .el-table tr:nth-child(2n) {
    background: #f2f2f2;
}
</style>
<style>
.el-table .selected-row-color {
    background-color: #b8dcff !important;
}
.el-table--enable-row-hover .el-table__body tr.selected-row-color:hover > td {
    background-color: #b8dcff !important;
}
.el-table__body-wrapper .el-table__body tr.selected-row-color.hover-row > td {
    background-color: #b8dcff !important;
}
.el-table__fixed-body-wrapper
    .el-table__body
    tr.selected-row-color.hover-row
    > td {
    background-color: #b8dcff !important;
}
.el-table__body-wrapper
    .el-table__body
    tr.selected-row-color.hover-row
    > .el-table__row--striped {
    background-color: #b8dcff !important;
}
.el-scrollbar__bar.is-horizontal {
    height: 12px;
    left: 2px;
}
</style>
